<template>
  <div class="home_box">
    <div class="mainbox">
      <!-- 左 -->
      <div class="column">
        <!-- 设备情况 -->
        <div class="left_top">
          <div class="top_box">
            <p class="p1">设备情况</p>
          </div>
          <div class="lefttop_foot">
            <div class="tab_box">
              <div v-for="(i, index) in datas" :key="i.id" @click="btn_tab(index)" :class="index == cut ? 'opt' : ''">
                {{ i.name }}</div>
            </div>
            <div class="lefttable">
              <div>
                <img src="../assets/img/ry.png" alt="">
              </div>
              <div>
                <div class="yuan">
                  <span>aaa</span>
                  <span>bbb<span style="font-size: .16rem;font-weight: 400;">人</span></span>
                </div>
                <div class="yuan"></div>
                <div class="yuan"></div>
              </div>
            </div>
          </div>
        </div>
        <!-- 今日各区域人/车流量统计 -->
        <div class="left_center">
          <div class="top_box">
            <p class="p1">今日各区域人/车流量统计</p>
          </div>
          <div class="leftcenter_foot">
            <mycharts width="4.48rem" height="2.51rem" :option="option1"></mycharts>
          </div>
        </div>
        <!-- 今日各时段人/车流量 -->
        <div class="left_foot">
          <div class="top_box">
            <p class="p1">今日各时段人/车流量</p>
          </div>
          <div class="leftfoot_foot">
            <mycharts width="4.48rem" height="2.51rem" :option="option2"></mycharts>
          </div>
        </div>
      </div>
      <!-- 右 -->
      <div class="column">
        <div class="right_top">
          <div class="top_box">
            <p class="p1" style="color: #F84848;">紧急动态(23条)</p>
          </div>
          <div class="righttop_foot">
            <el-table :data="tableData" style="width: 100%" height="2.8rem" highlight-current-row="false">
              <el-table-column prop="name" label="事件类型" width="" />
              <el-table-column prop="address" label="上报人" width="" />
              <el-table-column prop="date" label="时间" width="" />
              <el-table-column label="操作" width="" />
            </el-table>
          </div>
        </div>
        <div class="right_foot">
          <div class="top_box">
            <p class="p1">其他事件监控</p>
          </div>
            <div class="rightfoot_foot">
              <div class="jk_box">
                <div>
                  <div class="jk_top">
                    <img src="../assets/img/zj.png" alt="" class="img1">
                    <span style="font-size: .16rem; color: #fff;margin-left: .08rem;">55555</span>
                  </div>
                  <div class="jk_img">
                    <img src="../assets/img/ry.png" alt="" class="img2">
                  </div>
                  <div class="jk_time">
                    <img src="../assets/img/time.png" alt="" class="img3">
                    <span  style="font-size: .14rem; color: #fff;margin-left: .08rem;">789456132</span>
                  </div>
                </div>
                <div>
                  <div class="jk_top">
                    <img src="../assets/img/zj.png" alt="" class="img1">
                    <span style="font-size: .16rem; color: #fff;margin-left: .08rem;">55555</span>
                  </div>
                  <div class="jk_img">
                    <img src="../assets/img/ry.png" alt="" class="img2">
                  </div>
                  <div class="jk_time">
                    <img src="../assets/img/time.png" alt="" class="img3">
                    <span  style="font-size: .14rem; color: #fff;margin-left: .08rem;">789456132</span>
                  </div>
                </div>
              </div>
              <div class="jk_box">
                <div>
                  <div class="jk_top">
                    <img src="../assets/img/zj.png" alt="" class="img1">
                    <span style="font-size: .16rem; color: #fff;margin-left: .08rem;">55555</span>
                  </div>
                  <div class="jk_img">
                    <img src="../assets/img/ry.png" alt="" class="img2">
                  </div>
                  <div class="jk_time">
                    <img src="../assets/img/time.png" alt="" class="img3">
                    <span  style="font-size: .14rem; color: #fff;margin-left: .08rem;">789456132</span>
                  </div>
                </div>
                <div>
                  <div class="jk_top">
                    <img src="../assets/img/zj.png" alt="" class="img1">
                    <span style="font-size: .16rem; color: #fff;margin-left: .08rem;">55555</span>
                  </div>
                  <div class="jk_img">
                    <img src="../assets/img/ry.png" alt="" class="img2">
                  </div>
                  <div class="jk_time">
                    <img src="../assets/img/time.png" alt="" class="img3">
                    <span  style="font-size: .14rem; color: #fff;margin-left: .08rem;">789456132</span>
                  </div>
                </div>
              </div>
              <div class="jk_box">
                <div>
                  <div class="jk_top">
                    <img src="../assets/img/zj.png" alt="" class="img1">
                    <span style="font-size: .16rem; color: #fff;margin-left: .08rem;">55555</span>
                  </div>
                  <div class="jk_img">
                    <img src="../assets/img/ry.png" alt="" class="img2">
                  </div>
                  <div class="jk_time">
                    <img src="../assets/img/time.png" alt="" class="img3">
                    <span  style="font-size: .14rem; color: #fff;margin-left: .08rem;">789456132</span>
                  </div>
                </div>
                <div>
                  <div class="jk_top">
                    <img src="../assets/img/zj.png" alt="" class="img1">
                    <span style="font-size: .16rem; color: #fff;margin-left: .08rem;">55555</span>
                  </div>
                  <div class="jk_img">
                    <img src="../assets/img/ry.png" alt="" class="img2">
                  </div>
                  <div class="jk_time">
                    <img src="../assets/img/time.png" alt="" class="img3">
                    <span  style="font-size: .14rem; color: #fff;margin-left: .08rem;">789456132</span>
                  </div>
                </div>
              </div>

          </div>
         
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import * as echarts from 'echarts';
import { getmancarApi, getDeviceAndMsgApi ,getAreaFlowApi} from '../utils/api.js'
import mycharts from '@/components/mycharts.vue';
let datas = reactive([
  { name: '人员', id: 0 },
  { name: '车辆', id: 1 }
])
let cut = ref(0)
// 左一
const option1 = reactive({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {
    data: ['人员', '车辆', '其他'],
    icon: "circle",
    right: '2%',
    top: '5%',
    textStyle: {
      color: "#fff",
      fontSize: ".14rem",
    },
    itemWidth: 10,
    itemHeight: 10,
    itemGap: 10
  },
  grid: {
    left: '3%',
    top: '15%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [{
    type: 'category',
    data: ['喀什市',
      '疏附县',
      '疏勒县',
      '英吉沙县',
      '泽普县',
      '岳普湖县',
    ],
    axisLine: {
      show: true,
      lineStyle: {
        color: "rgba(255, 255, 255)",
        width: 1,
        type: "solid"
      }
    },
    axisTick: {
      show: false,
    },
    axisLabel: {
      show: true,
      interval: 0,
      textStyle: {
        color: "rgba(255, 255, 255, 0.80)",
        fontSize: ".16rem",
      },

    },
  }],
  yAxis: [{
    type: 'value',
    axisLabel: {

    },
    axisTick: {
      show: false,
    },
    axisLine: {
      show: false,
      lineStyle: {
        color: "rgba(255, 255, 255, 0.80)",
        width: 1,
        type: "solid"
      },
    },
    splitLine: {
      lineStyle: {
        color: "#063374",
      }
    }
  }],
  series: [{
    name: '人员',
    type: 'bar',
    data: [20, 50, 80, 58, 83, 68, 57, 80, 42, 66],
    barWidth: '20%', //柱子宽度
    itemStyle: {
      normal: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: '#89DD6F'
        }, {
          offset: 0.5,
          color: 'rgba(137, 221, 111, 0.7)'
        }, {
          offset: 1,
          color: 'rgba(137, 221, 111, 0.1)'
        }]),
        barBorderRadius: 12,
      }
    }
  }, {
    name: '车辆',
    type: 'bar',
    data: [50, 70, 60, 61, 75, 87, 60, 62, 86, 46],
    barWidth: '20%',
    itemStyle: {
      normal: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: '#5388F5'
        }, {
          offset: 0.5,
          color: 'rgba(83, 136, 245, 0.7)'
        }, {
          offset: 1,
          color: 'rgba(83, 136, 245, 0.1)'
        }]),
        barBorderRadius: 12,
      }
    }
  }, {
    name: '其他',
    type: 'bar',
    data: [70, 48, 73, 68, 53, 47, 50, 72, 96, 86],
    barWidth: '20%',
    // barGap: 1,
    itemStyle: {
      normal: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: '#FCBE47'
        }, {
          offset: 0.5,
          color: 'rgba(252, 190, 71, 0.7)'
        }, {
          offset: 1,
          color: 'rgba(252, 190, 71, 0.1)'
        }]),
        barBorderRadius: 12,
      }
    }
  }]
})
// 左二
const option2 = reactive({
  color: ['#62F2FB', '#FCBE47'],
  tooltip: {
  },
  legend: {
    data: ['人员', '车辆'],
    icon: "circle",
    right: 30,
    top: '3%',
    textStyle: {
      color: "rgba(255, 255, 255, 0.80)",
      fontSize: ".14rem",
    },
    itemWidth: 10,
    itemHeight: 10,
    itemGap: 50
  },
  grid: {
    top: "20%",
    left: '5%',
    right: '4%',
    bottom: '15%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    // boundaryGap: false,
    data: ['0时', '2时', '4时', '6时', '8时', '10时', '12时', '14时', '16时', '18时', '20时', '22时'],
    axisLine: {
      show: true,
      lineStyle: {
        color: "rgba(255, 255, 255, 0.80)",
        width: 1,
        type: "solid"
      }
    },
    axisTick: {
      show: false,
    },
    axisLabel: {
      show: true,
      interval: 0,
      textStyle: {
        color: "rgba(255, 255, 255, 0.80)",
        fontSize: ".14rem",
      },
    },
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      show: true,
      interval: 0,
      textStyle: {
        color: "rgba(255, 255, 255, 0.80)",
        fontSize: ".14rem",
      },
    },
    axisLine: {
      show: false,
      lineStyle: {
        width: 1,
        type: "solid"
      }
    },
    splitLine: {
      lineStyle: {
        color: "#40658c",
      }
    }
  },
  dataZoom: [{  //添加dataZoom属性即可显示滑动条S
    orient: 'horizontal',
    show: true,//控制滚动条显示隐藏
    realtime: true, //拖动滚动条时是否动态的更新图表数据
    handleSize: 0,
    height: '3%', //滚动条高度
    start: 0, //滚动条开始位置（共6等份）
    end: 60,//滚动条结束位置
    top: '94%',
    // bottom: '20%',
    left: '9%', //滚动条靠左侧的百分比
    zoomLock: false, //控制面板是否进行缩放
    startValue: 0, // 从头开始。
    endValue: 5,// 一次性展示6个
    showDetail: false, // 关闭滚动条提示
    backgroundColor: "rgb(63, 116, 168 , 0.5)",
    fillerColor: 'rgba(255, 255, 255,0.5)',
    zoomLock: true,
    zoomOnMouseWheel: false,
    brushSelect: false,
    showDetail: false,
    showDataShadow: false
  }],
  series: [
    {
      name: '人员',
      type: 'line',
      stack: 'Total',
      data: [120, 132, 101, 134, 90, 230, 210, 220, 182, 191, 234, 290,],
      symbol: 'circle',
      symbolSize: 8,

    },
    {
      name: '车辆',
      type: 'line',
      stack: 'Total',
      data: [150, 232, 201, 154, 190, 330, 410, 320, 332, 301, 334, 390,],
      symbol: 'circle',
      symbolSize: 8,

    },
  ]
})
const tableData = [
  {
    date: '2016-05-03 15:30:20',
    name: '人员重点区域入侵',
    address: '啦啦啦',
  },
  {
    date: '2016-05-03 15:30:20',
    name: '人员重点区域入侵',
    address: '啦啦啦',
  },
  {
    date: '2016-05-03 15:30:20',
    name: '人员重点区域入侵',
    address: '啦啦啦',
  },
  {
    date: '2016-05-03 15:30:20',
    name: '人员重点区域入侵',
    address: '啦啦啦',
  },
]
let username = 15701160853
let manageSite = 'wulingshanSite'
const getmancar = async () => {
  let res = await getAreaFlowApi(username)
  console.log(res);
}
const btn_tab = (index) => {
  cut.value = index
}
getmancar()
</script>

<style>
@import "../static/css/Home.css";
</style>

<style>
.el-table {
  --el-table-bg-color: none;
  --el-table-tr-bg-color: none;
  --el-table-border-color: none;
  --el-table-row-hover-bg-color: var(--el-transfer-border-color);
  --el-table-border: 1px solid rgba(255, 255, 255, 0.5) !important;
  color: rgba(255, 255, 255, 0.80);
  text-align: center;
}

.el-table__expanded-cell {
  --el-table-bg-color: none;
  color: #93dcfe;
  font-size: .24rem;
  font-weight: 700;
}

.el-table th.el-table__cell {
  background: rgba(248, 72, 72, 0.20) !important;
  height: .58rem;

}

.el-table-column {
  color: #fff !important;
}

.el-table .cell {
  padding: 0;
  text-align: center;
  font-size: .14rem;
}

.el-table,
.el-table th.el-table__cell.is-leaf {
  border-bottom: none !important;
}</style>